<template>
  <ele-pro-table ref="tableRef" row-key="userId" :columns="columns" :datasource="datasource">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a @click="onEdit(record)">修改</a>
      </template>
    </template>
  </ele-pro-table>
</template>

<script setup>
import { ref } from 'vue';
import { EleProTable } from 'ele-admin-pro';
import 'ele-admin-pro/es/ele-pro-table/style';

// 表格ref
const tableRef = ref(null);

// 表格列
const columns = ref([
  {
    key: 'index',
    width: 48,
    align: 'center',
    hideInSetting: true,
    customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
  },
  {
    title: '用户账号',
    dataIndex: 'username'
  },
  {
    title: '用户名',
    dataIndex: 'nickname'
  },
  {
    key: 'action',
    title: '操作'
  }
]);

// 表格数据源
const datasource = ({ page, limit, orders }) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        list: [
          { userId: 1, username: 'admin', nickname: '管理员' },
          { userId: 2, username: 'user01', nickname: '用户一' }
        ],
        count: 2
      });
    }, 1500);
  });
};

const onEdit = (row) => {
  console.log(row);
};
</script>

